    <!DOCTYPE html>
    <html lang="en">

    <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">
    <title>首页</title>
    <link href="/static/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="/static/vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <link href="/static/css/sb-admin.css" rel="stylesheet">
    </head>

    <body class="fixed-nav sticky-footer bg-dark" id="page-top">
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top" id="mainNav">
    <a class="navbar-brand" href="home.html">天气数据分析系统</a>
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarResponsive">
      <ul class="navbar-nav navbar-sidenav" id="exampleAccordion">
        <li class="nav-item" data-toggle="tooltip" data-placement="right" title="Dashboard">
          <a class="nav-link" href="/home">
            <i class="fa fa-fw fa-dashboard"></i>
            <span class="nav-link-text">首页</span>
          </a>
        </li>
        <li class="nav-item" data-toggle="tooltip" data-placement="right" title="Tables">
          <a class="nav-link" href="/map">
            <i class="fa fa-fw fa-table"></i>
            <span class="nav-link-text">天气地图</span>
          </a>
        </li>
        <li class="nav-item" data-toggle="tooltip" data-placement="right" title="Charts">
          <a class="nav-link" href="/search">
            <i class="fa fa-fw fa-area-chart"></i>
            <span class="nav-link-text">天气分析</span>
          </a>
        </li>
        <li class="nav-item" data-toggle="tooltip" data-placement="right" title="Tables">
          <a class="nav-link" href="/lishi">
            <i class="fa fa-fw fa-table"></i>
            <span class="nav-link-text">历史天气</span>
          </a>
        </li>
      </ul>
      <ul class="navbar-nav sidenav-toggler">
        <li class="nav-item">
          <a class="nav-link text-center" id="sidenavToggler">
            <i class="fa fa-fw fa-angle-left"></i>
          </a>
        </li>
      </ul>
      <ul class="navbar-nav ml-auto">

        <li class="nav-item">
          <a class="nav-link" data-toggle="modal" data-target="#exampleModal">
            <i class="fa fa-fw fa-sign-out"></i>{{ email }}</a>
        </li>
      </ul>
    </div>
    </nav>
    <div class="content-wrapper">
    <div class="container-fluid">
      <ol class="breadcrumb">
        <li class="breadcrumb-item active">首页</li>
      </ol>
      <div class="row">
        <div class="col-xl-3 col-sm-6 mb-3">
          <div class="card text-white bg-primary o-hidden h-100">
            <div class="card-body">
              <div class="mr-5">{{ sunny }}</div>
            </div>
            <a class="card-footer text-white clearfix small z-1" href="#">
              <span class="float-left">晴天的城市数量</span>
            </a>
          </div>
        </div>
        <div class="col-xl-3 col-sm-6 mb-3">
          <div class="card text-white bg-warning o-hidden h-100">
            <div class="card-body">
              <div class="mr-5">{{cloudy}}</div>
            </div>
            <a class="card-footer text-white clearfix small z-1" href="#">
              <span class="float-left">阴天的城市数量</span>
            </a>
          </div>
        </div>
        <div class="col-xl-3 col-sm-6 mb-3">
          <div class="card text-white bg-success o-hidden h-100">
            <div class="card-body">
              <div class="mr-5">{{ rainy }}</div>
            </div>
            <a class="card-footer text-white clearfix small z-1" href="#">
              <span class="float-left">雨天的城市数量</span>
            </a>
          </div>
        </div>
        <div class="col-xl-3 col-sm-6 mb-3">
          <div class="card text-white bg-danger o-hidden h-100">
            <div class="card-body">
              <div class="mr-5">{{ snowy }}</div>
            </div>
            <a class="card-footer text-white clearfix small z-1" href="#">
              <span class="float-left">雪天的城市数量</span>
            </a>
          </div>
        </div>
      </div>
    <!-- 条形图 -->
    <div class="col-lg-12">
      <div class="card mb-3">
        <div class="card-header">
          <i class="fa fa-bar-chart"></i> 最高温度的十个城市
        </div>
        <div class="card-body">
          <div id="highestTemperatureChart" style="width: 100%; height: 400px;"></div>
<!--            #用于后续echarts的定位-->
        </div>
      </div>
    </div>
    <!-- 折线图 -->
    <div class="col-lg-12"> <!-- 添加 text-center 类 -->
      <div class="card mb-3">
        <div class="card-header">
          <i class="fa fa-line-chart"></i> 温度最低的十个城市
        </div>
        <div class="card-body">
          <div id="lowestTemperatureChart" style="width: 100%; height: 400px;"></div>
<!--            #用于后续echarts的定位-->
        </div>
      </div>
    </div>

    <!-- 饼图环形图 -->
    <div class="row justify-content-center"> <!-- 添加 justify-content-center 类 -->
      <div class="col-lg-6"> <!-- 移除 text-center 类 -->
        <div class="card mb-3">
          <div class="card-header">
            <i class="fa fa-pie-chart"></i> 风速最大的十个城市
          </div>
          <div class="card-body text-center"> <!-- 添加 text-center 类 -->
            <div id="pieChart" style="width: 100%; height: 400px;"></div>
<!--              #pieChart-->
          </div>
        </div>
      </div>

      <!-- 环形图 -->
      <div class="col-lg-6"> <!-- 移除 text-center 类 -->
        <div class="card mb-3">
          <div class="card-header">
            <i class="fa fa-pie-chart"></i> 湿度最大的十个城市
          </div>
          <div class="card-body text-center"> <!-- 添加 text-center 类 -->
            <div id="ringChart" style="width: 100%; height: 400px;"></div>
<!--              #ringChart-->
          </div>
        </div>
      </div>
    </div>


    </div>
    </div>
    <footer class="sticky-footer">
    <div class="container">
      <div class="text-center">
        <small>“Python>C>Java xixi”</small>
      </div>
    </div>
    </footer>

    <a class="scroll-to-top rounded" href="#page-top">
    <i class="fa fa-angle-up"></i>
    </a>
    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel"></h5>
          <button class="close" type="button" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">×</span>
          </button>
        </div>
        <div class="modal-body">真的要退出系统了吗？</div>
        <div class="modal-footer">
          <button class="btn btn-secondary" type="button" data-dismiss="modal">取消</button>
          <a class="btn btn-primary" href="/">确定</a>
        </div>
      </div>
    </div>
    </div>
    <script src="/static/vendor/jquery/jquery.min.js"></script>
    <script src="/static/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
    <script src="/static/vendor/jquery-easing/jquery.easing.min.js"></script>
    <script src="/static/js/sb-admin.min.js"></script>
    <script src="/static/vendor/echarts/echarts.min.js"></script>
<script>
    // 初始化 ECharts 实例
    var myChart = echarts.init(document.getElementById('highestTemperatureChart'));

    // 将从 Flask 模板传递过来的变量 highest_temperatures 转换为 JavaScript 对象。
    var highestTemperatures = JSON.parse('{{ highest_temperatures | tojson | safe}}');

    // 提取城市名称和温度数据
    var cities = [];
    var temperatures = [];
    for (var i = 0; i < highestTemperatures.length; i++) {
        cities.push(highestTemperatures[i][0]);
        temperatures.push(highestTemperatures[i][1]);
    }
<!--    // 通过遍历转换后的 'highestTemperatures' 对象，将其中的城市名称存储到 'cities' 数组中，对应的温度值存储到 'temperatures' 数组中。-->
<!--       // 这样就将数据分离出来，以便后续在图表中使用。-->
<!--    // 指定图表的配置项和数据-->
    var option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        xAxis: {
            type: 'category',
            data: cities,
            axisLabel: {
                rotate: 45, // 旋转角度
                interval: 0 // 强制显示所有标签
            }
        },
        yAxis: {
            type: 'value'
        },
        series: [{
            name: '温度',
            type: 'bar',
            data: temperatures,
            itemStyle: {
                color: '#3398DB' // 柱状图颜色
            }
        }]
    };

    myChart.setOption(option);
</script>

<script>
    var lowestTemperatures = JSON.parse('{{ lowest_temperatures | tojson | safe}}');

    var cities = [];
    var temperatures = [];
    for (var i = 0; i < lowestTemperatures.length; i++) {
        cities.push(lowestTemperatures[i][0]);
        temperatures.push(lowestTemperatures[i][1]);
    }

    var lowestTemperatureChart = echarts.init(document.getElementById('lowestTemperatureChart'));

    var option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'line'
            }
        },
        xAxis: {
            type: 'category',
            data: cities,
            axisLabel: {
                rotate: 45,
                interval: 0
            }
        },
        yAxis: {
            type: 'value'
        },
        series: [{
            name: '温度',
            type: 'line',
            data: temperatures,
            itemStyle: {
                color: '#d9534f' // 折线图颜色
            }
        }]
    };

    lowestTemperatureChart.setOption(option);
</script>

<script>
    // 使用从后端路由获取的数据设置饼图
    var pieData = JSON.parse('{{ highest_wind | tojson | safe }}');
    var pieChart = echarts.init(document.getElementById('pieChart'));
    var pieOption = {
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
            orient: 'vertical',
            left: 'left',
            data: pieData.map(function(item) {
                return item[0];
            })
        },
        series: [{
            name: '风力',
            type: 'pie',
            radius: '55%',
            center: ['50%', '60%'],
            data: pieData.map(function(item) {
                return { value: item[1], name: item[0] };
            }),
            itemStyle: {
                emphasis: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }]
    };
    pieChart.setOption(pieOption);
</script>

<script>
    // 使用从后端路由获取的数据设置环形图
    var ringData = JSON.parse('{{ highest_humidity | tojson | safe }}');
    var ringChart = echarts.init(document.getElementById('ringChart'));

    var ringOption = {
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
            orient: 'vertical',
            left: 'left',
            data: ringData.map(function(item) {
                return item[0];
            })
        },
        series: [{
            name: '湿度',
            type: 'pie',
            radius: ['50%', '70%'],
            center: ['50%', '60%'],
            data: ringData.map(function(item) {
                return { value: item[1], name: item[0] };
            }),
             // 从解析后的 ringData 中提取每个数据项的名称作为图例的数据。
            itemStyle: {
                emphasis: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            },
            label: {
                formatter: '{b} : {d}%'
            }
        }]
    };
    ringChart.setOption(ringOption);
</script>

    </body>
    </html>
